html{height:100%;margin:0;padding:0}
body{margin:0;font-family:"Inconsolata";height:100%; color:white;
  background: black;}

a{text-decoration:none;color:#FF0F00;}
footer {color:white;}
a:hover{text-decoration:underline;}
hr{border:0;height:0;border-top:1px solid rgba(0,0,0,0.1);
border-bottom:1px solid rgba(255,255,255,0.3)}

#author-name{font-size:30px;color:#ffffff;display:inline-block}

.navbar{padding:50px 0 50px 0; color:white;}

.navbar-ul{display:inline-block;margin:0;padding:5px 0 5px 0;margin-left:20px}


.nav-list{list-style-type:none;margin:0 5px 0 10px}
.alignable,.pull-left,.pull-right{display:inline-block}
.pull-left{float:left}
.pull-right{float:right}
.container{max-width:780px;margin:auto;color:white}
.wrapper{min-height:100%}
#ins-logo{margin:auto;display:block;max-height:100px;text-align:center}

@media (max-width: 800px){
    .container{max-width:600px;transition:0.3s ease all}}
@media (max-width: 650px){
    .container{max-width:83%}
    .navbar-ul{margin-top:5px}}
    @media (max-width: 500px){
        .navbar{text-align:center;padding:50px 0px 0px 0px}
        #author-name{width:100%;float:none}
        #navlist{padding:10px 0 10px 0;margin:0;display:block;float:none;text-align:center;width:100%}
        #navlist li.alignable,#navlist li.pull-left,#navlist li.pull-right{display:inline-block}
        #navlist li.pull-left{float:none}
        #navlist li.nav-list{margin:0}}
        .content a:hover{text-decoration:underline}
        .content ol{counter-reset:list}
        .content ol>li{list-style-position:none;position:relative;list-style:none;margin-top:5px;margin-bottom:5px}
        .content ul>li{margin:5px 0 5px 0}
        .content ul{padding:0 20px 0 20px}
        .content ol{padding:0 30px 0 30px}
        .content ol>li:before{content:"[" counter(list,decimal) "] ";counter-increment:list;position:absolute;left:-30px}
        .content blockquote{border-left:5px solid #333333;margin:20px 0 20px 0;padding:2px 8px 2px 8px;font-style:italic}
        .content .profile-picture{height:85px;width:85px;position:relative;margin:-10px 0 0 15px;float:right;border-radius:50%}
        p .content .profile-picture{padding:0;margin:0}
        @media (max-width: 480px){ #ogis480px
            .content .profile-picture img{margin-top:-5px}}
            .content img{text-align:center;width:100%}
            table{margin:15px 0;border-collapse:collapse;width:100%;padding:0}
            table tr{border-top:1px solid #cccccc;background-color:white;margin:0;padding:0}
            table tr:nth-child(2n){background-color:#f8f8f8}table tr th{font-weight:bold;border:1px solid #cccccc;text-align:left;margin:0;padding:6px 13px}table tr td{border:1px solid #cccccc;text-align:left;margin:0;padding:6px 13px}table tr th :first-child,table tr td :first-child{margin:0}table tr th :last-child,table tr td :last-child{margin:0}



         .card {
                /* Add shadows to create the "card" effect */
                box-shadow: 0 4px 8px 0 rgba(71, 64, 64, 0.2);
                transition: 0.3s;
                color:rgb(255, 255, 255);
        }
              
        /* On mouse-over, add a deeper shadow */
        .card:hover {
                /*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);*/
                box-shadow:#f8f8f8;
        }
   
        /* Add some padding inside the card container */
        .container1 {
           /*padding: 2px 16px 2px 2px;*/
           display:flex;
           justify-content: space-between;
           height:150px;
            /*width:300px; */
            width: 100%;
            margin: 0 3% 0 3%;
            }
/* gotta get some filters in here */
input[type="checkbox"] {
    display:relative;
  }
  
  input[type="checkbox"]:hover {
    background: rgba(166, 164, 164, 0.1);
  }
  
  input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 1.05em;
    height: 1.05em;
    border-radius: 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    top: -15%;
    left: 0;
}
  
  /*input[type="checkbox"]:checked::after {
    content: "";
    display: block;
     /*background-color: rgb(148 33 13 / 90%);
      display: block;
      width: 1.05em;
      height: 1.05em;
      border-radius: 5px;  
    height: 110%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 110%;
    position: relative;
    /* top: -12%;
      left: -10%; 
    top: -15%;
    left: 0;
  }*/

#gallery.creative .card.type-creative,
#gallery.front-end .card.type-data-viz
#gallery.hackathons .card.type-hackathons,
#gallery.tech .card.type-tech, 
#gallery.research .card.type-research,
#gallery.design .card.type-design,
#gallery.front-end .card.type-front-end,
#gallery.OSINT .card.type-OSINT,
#gallery.cybersec .card.type-cybsersecurity,
#gallery.data-journalism .card.type-data-journalism,
#gallery.learning .card.type-learning
{
  display: initial;
  margin-top: 60px;
  margin-bottom: -60px;
  cursor: crosshair;
}
  /*label {
    /* cursor: pointer; 
    display: flex;
    font-size: 1.5rem;
    align-items: center;
    height: 100%;
    margin-right: 30px;
    margin-top: 11px;
    margin-bottom: 11px;
    margin-left: 12px;
    font-family: "Montreal-Book";
    float: left;
  }*/
  
  .filters {
    margin-top: 50px;
    margin-left: 120px;
    margin-right: 120px;
    margin-bottom: 60px;
    overflow: hidden;
  }
  

  .portfolio-filter{
    justify-content: center;
    size:100px;

  }